<!DOCTYPE html>
<html>
<head>
    <% include("/common/title.html"){} %>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="col-sm-12">
        <div class="example">
            <div class="row">
                <div class="col-sm-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>查询条件</h5>
                            <div class="ibox-tools">
                                <a class="collapse-link">
                                    <i class="fa fa-chevron-up"></i>
                                    隐藏
                                </a>
                            </div>
                        </div>
                        <div class="ibox-content">
                            <div class="row form-horizontal">
                                <div class="col-sm-10">
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">服务商</label>
                                        <div class="col-sm-2">
                                            <select class="form-control" name="searchf_company_id" id="searchf_company_id">
                                                <option value="">请选择</option>
                                                <option value="1">诺诺</option>
                                            </select>
                                        </div>
                                        <label class="col-sm-2 control-label">发票类型</label>

                                        <div class="col-sm-2">
                                            <select class="form-control" name="f_sp_log_type_id" id="f_sp_log_type_id">
                                                <option value="">请选择</option>
                                                <option value="1">开票</option>
                                                <option value="2">红票</option>
                                            </select>
                                        </div>
                                    </div>
                                        <label class="col-sm-2 control-label">状态</label>
                                        <div class="col-sm-2">
                                            <select class="form-control" name="status" id="status">
                                                <option value="">请选择</option>
                                                <option value="0">成功</option>
                                                <option value="1">失败</option>
                                            </select>
                                        </div>
                                    </div>

                                    <p>
                                        <button class="btn  btn-primary" onclick="searchTable()"
                                                type="submit"><strong>查询</strong>
                                        </button>
                                        <button class="btn  btn-white"
                                                type="submit" onclick="clearSearchBtn()"><strong>清空查询条件</strong>
                                        </button>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--            <p class="hidden-xs" id="tableToolbar" role="group">-->
            <!--                <button type="button" class="btn  btn-xm btn-primary" onclick="()">-->
            <!--                    <i class="glyphicon glyphicon-pencil" aria-hidden="true"></i>查看-->
            <!--                </button>-->
            <!--            </p>-->
            <div class="ibox-content">
                <table id="tablepager" data-mobile-responsive="true">
                </table>
            </div>
        </div>
    </div>
</div>
<div id="editer_form_div" style="display: none;">
    <form class="form-horizontal" id="myForm">
        <div class="col-md-12">
            <div class="hr-line-dashed"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">发票类型 :</label>
                <div class="col-sm-6">
                    <span id="f_sp_log_type" name="f_sp_log_type"></span>
                </div>
            </div>
            <div class="hr-line-dashed"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">时间 :</label>
                <div class="col-sm-6">
                    <span id="f_create_time" name="f_create_time"></span>
                </div>
            </div>
            <div class="hr-line-dashed"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">状态(错误信息) :</label>
                <div class="col-sm-6">
                    <span id="f_status" name="f_status"></span>
                </div>
            </div>
            <div class="hr-line-dashed"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">耗时（ms） :</label>
                <div class="col-sm-6">
                    <span id="f_duration" name="f_duration"></span>
                </div>
            </div>
            <div class="hr-line-dashed"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">请求参数 :</label>
                <div class="col-sm-6">
                    <span id="f_request" name="f_request"></span>
                </div>
            </div>
            <div class="form-group" id="showBusinessRequest" style="display: none;">
                <label class="col-sm-2 control-label">请求业务参数 :</label>
                <div class="col-sm-6">
                    <span id="f_business_request" name="f_business_request"></span>
                </div>
            </div>
            <div class="form-group" id="showOneImg" style="display: none;">
                <label class="col-sm-2 control-label">请求参数img :</label>
                <div class="col-sm-3">
                    <p class="text-center" style="">
                        <img id="imgOne" class="img-rounded">
                    </p>
                </div>
            </div>
            <div class="form-group" id="showTwoImg" style="display: none;">
                <label class="col-sm-2 control-label">请求参数img :</label>
                <div class="col-sm-3">
                    <p class="text-center">
                        <img ondblclick="bigImg()" id="imgTwo" class="img-rounded col-sm-12 ">
                    </p>
                    <p class="text-center">
                        <img ondblclick="bigImg()" id="imgThree" class="img-rounded col-sm-12">
                    </p>
                </div>
            </div>
            <div class="hr-line-dashed"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">响应信息 :</label>
                <div class="col-sm-6">
                    <span id="f_response" name="f_response"></span>
                </div>
            </div>
        </div>
    </form>
</div>
<% include("/common/commonjs.html"){} %>
<script type="text/javascript">

    $(function () {
        loadData();
    });

    function loadData() {
        var url = "${ctxPath }/serviceProviderLog/page";
        $('#tablepager').bootstrapTable({
            url: url,
            dataType: "json",
            pagination: true, //分页
            singleSelect: true,//只能选择一行
            clickToSelect: true,
            search: false, //显示搜索框
            sidePagination: "server", //服务端处理分
            pageNumber: 1,
            pageSize: 10,
            pageList: [10, 20, 50, 100],
            queryParams: function (params) {
                var par = {
                    "f_duration": $("#searchf_duration").val(),
                    "f_sp_log_type": $("#f_sp_log_type_id").val(),
                    "f_status": $("#status").val()
                };
                var p = $.extend({}, params, par);
                return p;
            },
            showColumns: true,
            showRefresh: true,
            showToggle: true,
            toolbar: "#tableToolbar",
            columns: [{
                field: "",
                title: "",
                formatter: function (value, row) {
                    console.log(row.id)
                    return "<a href='#'  class='btn btn-primary btn-xs' onclick=\"showInfo(\'" + row.id + "\')\"><i class='fa fa-pencil'></i>查看</a>"
                },
                width: 50
            }, {
                field: "f_create_time",
                title: "请求时间",
                width: 200
            }, {
                field: "f_sp_log_type_show",
                title: "发票类型",
                width: 100
            }, {
                field: "f_service_provider_show",
                title: "服务商",
                width: 120
            }, {
                field: "f_status_show",
                title: "状态",
                formatter: function (value, row) {
                    if (row.f_status == 1) {
                        return value + "(" + row.f_error_msg + ")";
                    } else {
                        return value;
                    }
                },
                width: 200
            }, {
                field: "f_duration",
                title: "耗时（ms）",
                width: 50
            }, {
                field: "f_response",
                title: "响应信息",
                formatter: function (value, row) {
                    return "<pre>" + JSON.stringify(JSON.parse(value), null, 2) + "</pre>";
                }
            }
            ]
        });
    }

    function dilogForm(title, url) {
        var index = layer.open({
            type: 1,
            shade: false,
            title: title, //显示标题
            content: $('#editer_form_div'),
            closeBtn: 1,
            btn: ['确定'], //只是为了演示
            yes: function (index, layero) {
                layer.closeAll();
            },
            area: ['90%', '98%']
        });
    }

    //    显示票详情
    function showInfo(id) {
        $("#showOneImg").attr('style', 'display:none');
        $("#showTwoImg").attr('style', 'display:none');
        $("#showBusinessRequest").attr('style', 'display:none');
        dilogForm("详情", "");
        $.ajax({
            type: "get",
            dataType: "json",
            data: {id: id},
            url: "${ctxPath }/serviceProviderLog/" + id,
            success: function (data) {
                console.log(data);
                console.log(data.data.f_response);
                console.log(data.data.f_request);
                console.log(data.data.f_create_time);
                console.log(data.data.f_sp_log_type);
                if (data.success && data.code == 200) {
                    $("#f_create_time").html(data.data.f_create_time);
                    $("#f_sp_log_type").html(data.data.f_sp_log_type);
                    $("#f_service_provider").html(data.f_service_provider);
                    if (data.f_status == "1") {
                        $("#f_status").html(data.f_status_show + "(" + row.f_error_msg + ")");
                    } else {
                        $("#f_status").html(data.f_status_show);
                    }
                    $("#f_status").html(data.data.f_status_show);
                    $("#f_error_msg").html(data.data.f_error_msg);
                    $("#f_duration").html(data.data.f_duration);
                    $("#f_response").html("<pre>" + JSON.stringify(JSON.parse(data.data.f_response), null, 2) + "</pre>");
                    $("#f_request").html("<pre>" + JSON.stringify(JSON.parse(data.data.f_request), null, 2) + "</pre>");
                    if (data.showType == "1") {
                        $("#showOneImg").attr('style', 'display:');
                        $("#imgOne").attr('src', 'data:image/png;base64,' + data.imgOne);
                    }
                    if (data.showBusiness == "1") {
                        $("#showBusinessRequest").attr('style', 'display:');
                        $("#f_business_request").html("<pre>" + JSON.stringify(JSON.parse(data.business_request), null, 2) + "</pre>");
                    }
                    $("#pathData_id").html("");
                }
            },
            error: function (textStatus) {
                layer.alert("服务异常，请刷新重试");
            }
        });
    }

    function searchTable() {
        $('#tablepager').bootstrapTable("refresh");
    }


    function clearSearchBtn() {
        $("#searchf_company_id").val("");
        $("#searchf_service_type").val("");
        $("#status").val("");
        $("#searchf_duration").val("")
    }
</script>
</body>
</html>

</body>




